<template>
  <div class="login-form">
    <!-- <img class="login-img" src="../../assets/images/ewm.png" alt=""> -->
    <div class="grCode-box">
      <div id="grCode" ref="qrCodeDiv"></div>
      <div class="refresh">微信扫码即可完成注册登录</div>
      <div class="refresh" @click="getUrl()">
        刷新二维码
        <span class="iconfont icon-shuaxin"></span>
      </div>
    </div>
    <!-- <div class="tip-choose">
      <el-checkbox v-model="checked"> 登录即同意 <a href="#">《用户协议》</a> 和 <a href="#">隐私协议</a></el-checkbox>
    </div> -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2' // 引入生成二维码插件
import { getQrcode, getQrcodeStatus } from '@/api/login'
// import { setToken } from '@/utils/auth'
export default {
  name: 'Login',
  comments: {},
  data() {
    return {
      ewmUrl: 'http://weixin.qq.com/q/02dWidhYUkcVG1lSYphCct', // 可以自定义也可以根据项目需要从后台动态返回
      qrcodeData: {},
      timeInter: null,
      // 公众号扫码结果获取
      tokenData: {},
      checked: false
    }
  },
  watch: {},
  created() {
    this.getUrl()
  },
  beforeDestroy() {
    clearInterval(this.timeInter)
  },
  methods: {
    getUrl() {
      getQrcode().then((res) => {
        this.qrcodeData = res.data
        this.ewmUrl = res.data.qrcode.url
        this.creatEwm()
      })
    },
    creatEwm() {
      this.$nextTick(() => {
        this.$refs.qrCodeDiv.innerHTML = '' // 二维码清除
        new QRCode(this.$refs.qrCodeDiv, {
          text: this.ewmUrl, // 二维码链接，参数是否添加看需求
          width: 225, // 二维码宽度
          height: 225, // 二维码高度
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
        })
        this.getToken()
      })
    },
    getToken() {
      const that = this
      this.timeInter = setInterval(function () {
        const data = {
          trace_id: that.qrcodeData.trace_id
        }
        getQrcodeStatus(data)
          .then((res) => {
            that.tokenData = res.data
            if (res.data.status === 1) {
              clearInterval(that.timeInter)
              that.loginFun(res.data.token.access_token)
            } else if (res.data.status === 2) {
              clearInterval(that.timeInter)
              that.$emit('runTo', { type: 'bind', data: res.data.official_openid })
            }
          })
          .catch(() => {
            that.$message({
              message: '扫码失败，请刷新二维码后重试',
              type: 'warning'
            })
            clearInterval(that.timeInter)
          })
      }, 1000 * 2)
    },
    loginFun(data) {
      this.$store
        .dispatch('user/setStateToken', data)
        .then(() => {
          this.$router.push({ path: this.redirect || '/' })
        })
        .catch(() => {
          //
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-form {
  position: relative;
  max-width: 100%;
  margin-top: 50px;
  overflow: hidden;
  text-align: center;

  .grCode-box {
    width: 250px;
    padding: 5px;
    background: #fff;
    margin-left: 100px;
  }

  .refresh {
    line-height: 39px;
    color: #333;
    cursor: pointer;

    .iconfont {
      padding-left: 5px;
    }
  }

  .tip-choose {
    text-align: left;
    color: #9e9e9e;

    a {
      color: #0e8db5;
    }
  }
}
</style>
